<!-- 删除商户列表 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" @changeSize="changeSize"
    @changePage="changePage" @search="getSearchList" @changeTh="data.dialogVisible = true" @reset="handleReset">
    <template #form>
      <el-form-item label="类型：">
        <el-select class="selectWidth120" v-model="data.query.type" placeholder="请选择">
          <el-option v-for="item in data.typeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select class="selectWidth120" v-model="data.query.search_type" placeholder="请选择">
          <el-option v-for="item in data.idList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input class="width240" type="number" v-model="data.query.search_value" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="名称搜索：">
        <el-input v-model="data.query.agent_name" placeholder="请输入" />
      </el-form-item>
      <!-- <el-form-item label="日期时间：">
        <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" start-placeholder="请选择开始时间"
          end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" :disabled-date="indexStore.disabledDateTime"/>
      </el-form-item> -->
    </template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column :prop="item.prop" :label="item.label" :width="item.width" show-overflow-tooltip>
          <template v-if="item.prop == 'type'" #default="scope">
            <el-tag>{{ selectToLabel(data.typeList, scope.row.type) }}</el-tag>
          </template>
          <template v-if="item.prop == 'agent_name'" #default="scope">
            <span :class="scope.row.is_multi_currency == 1 ? 'item_details' : ''" @click="getSunList(scope.row)"> {{
              scope.row.agent_name }}
              <span class="tipsTextRed"
                v-if="scope.row.is_multi_currency == 1 ? true : false">({{ scope.row?.son_list?.length }})</span>
            </span>
          </template>
          <template v-if="item.prop == 'total_game_income'" #default="scope">
            {{ BigWan(scope.row.total_game_income) }}
          </template>
          <template v-if="item.prop == 'created_at'" #default="scope">
            {{ setTimestampTime(scope.row.created_at) }}
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button type="warning" v-permiss="'/system/destroyManager'" size="small" @click="recover(scope.row)">
            恢复
          </el-button>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>

  <!-- 下级商户 -->
  <el-dialog v-model="data.isShowAgent" title="下级商户" width="60%" :close-on-click-modal="false"
    :close-on-press-escape="false" top="12vh" @close="onHideDetails" class="dialogMaxHeight">
    <template #header>
      <p class="box-title" style="color:crimson">
        【{{ data.checkedItem.agent_id }}】 {{ data.checkedItem.agent_name }}
      </p>
    </template>
    <SearchTable :query="data.query" :list="data.listDetails" :total="0" :showSet="false" :showForm="false">
      <template #form> </template>
      <template #button></template>
      <template #table>
        <template v-for="(item, index) in data.fields" :key="index">
          <el-table-column :prop="item.prop" :label="item.label" :width="item.width" show-overflow-tooltip>
            <template v-if="item.prop == 'type'" #default="scope">
              <el-tag>{{ selectToLabel(data.typeList, scope.row.type) }}</el-tag>
            </template>
            <template v-if="item.prop == 'total_game_income'" #default="scope">
              {{ BigWan(scope.row.total_game_income) }}
            </template>
            <template v-if="item.prop == 'created_at'" #default="scope">
              {{ setTimestampTime(scope.row.created_at) }}
            </template>
          </el-table-column>
        </template>
      </template>
    </SearchTable>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import { selectToLabel } from '@/utils/index'
import { setTimeValue, setTimestampTime } from '@/utils/time'
import { BigWan } from '@/utils/math'
import { getDeleteChannel, recoverChannel } from '@/api/merchant'

import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    type: 1,
    search_type: 2,
    search_value: '',
    agent_name: '',
    // date: [getDateDay(0), getDateDay(0)],
  },
  list: [],
  total: 0,
  typeList: [
    { label: '商户', value: 1 },
    { label: '总代', value: 2 }
  ],
  idList: [
    { label: 'APPID', value: 1 },
    { label: '商户ID', value: 2 }
  ],
  fields: [
    { label: '序号', prop: 'id', width: '90' },
    { label: '类型', prop: 'type', width: '90' },
    { label: '名称', prop: 'agent_name', width: '180' },
    { label: '上级渠道', prop: 'operated_name', width: '150' },
    { label: '商户/总代ID', prop: 'agent_id', width: '150' },
    { label: 'APPID', prop: 'app_id', width: '150' },
    { label: '总输赢', prop: 'total_game_income', width: '' },
    { label: '总玩家数量', prop: 'count_user', width: '150' },
    { label: '创建时间', prop: 'created_at', width: '200' },
    { label: '删除时间', prop: 'deleted_at', width: '200' },
  ],
  dialogVisible: false,
  isShowAgent: false,
  checkedItem: {} as any,
  listDetails: [] as any[],
})

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  indexStore.setPageLoading(true)
  let query = JSON.parse(JSON.stringify(data.query))
  query = setTimeValue(query)
  let res = await getDeleteChannel(query)
  res.data?.list?.forEach((item: any, index: number) => {
    item.id = index + 1
  })
  data.list = res.data.list
  data.total = res.data.total
}

// 恢复渠道
const recover = async (row: any) => {
  ElMessageBox.confirm(`是否恢复对 ${selectToLabel(data.typeList, row.type)} -【${row.agent_name}】的删除`, '提示', {
    confirmButtonText: '恢复',
    cancelButtonText: '取消'
  }).then(async () => {
    await recoverChannel(row)
    ElMessage.success('恢复成功')
    indexStore.getOperator() //总代汇总
    indexStore.getAgent() //商户汇总
    getSearchList()
  }).catch(() => { })
}

// 查看子级商户
const getSunList = (row: any) => {
  if (!row.son_list?.length) {
    return ElMessage.error('暂无下一级')
  }
  Object.assign(data.checkedItem, row)
  row.son_list?.forEach((item: any,index:number) => {
    item.id = index + 1
  })
  data.listDetails = row.son_list
  data.isShowAgent = true
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}

const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const onHideDetails = () => {
  data.isShowAgent = false
}
const handleReset = () => {
  data.query = {
    page: 1,
    size: 50,
    type: 1,
    search_type: 2,
    search_value: '',
    agent_name: '',
    // date: [getDateDay(0), getDateDay(0)],
  }
  getSearchList()
}
</script>

<style scoped lang="scss"></style>
